<script>
    import '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.js';
    import '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.js';
    import {menuItems,seletedRoute} from "$lib/stores/globalControl.svelte.js";

</script>

<div>
    <sl-breadcrumb>
        {#snippet itemEach(parent,data)}

            {#each data as item}
                <!--一级路由-->
                {#if !item?.children?.length && $seletedRoute===item?.path }
                    {#if parent}
                        <sl-breadcrumb-item>
                            <sl-icon slot="prefix" name={parent?.icon}></sl-icon>
                            <a>{parent?.name}</a>
                        </sl-breadcrumb-item>
                    {/if}
                    <sl-breadcrumb-item>
                        {#if !parent}
                            <sl-icon slot="prefix" name={item?.icon}></sl-icon>
                        {/if}
                        <a>{item?.name}</a>
                    </sl-breadcrumb-item>
                {:else if item?.children?.length}
                    {@render itemEach(item,item?.children)}
                {/if}
            {/each}
        {/snippet}
        {@render itemEach(null,$menuItems)}
    </sl-breadcrumb>
</div>

<sl-divider style="--color: tomato;"></sl-divider>
<style>
    a{
        font-size: 1rem;
    }
    div {
        padding-left : 1%;
        height: 40%;
    }
</style>


